// @ts-nocheck
export default {
    data: {
        inputValue: '', // 输入框的value
        verificationValue: '', // 验证码value
        randomData: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
        verificationState: '', // 滑块验证状态
        imgCanvasCTX: '',
        imgCanvasWidth: 130, // canvas图片宽度
        imgCanvasHeigth: 50, // canvas图片高度
    },
    props: {
        verificationLength: {// 验证码长度
            default: 6,
            type: Number
        },
        isCaseSensitive: { // 是否区分大小写
            default: false,
            type: Boolean
        },
        isShowLine: { // 是否绘制干扰线
            default: true,
            type: Boolean
        },
        isShowDot: { // 是否绘制干扰点
            default: true,
            type: Boolean
        }
    },
    onReady(){
        this.updataValue();// 更新数据
        setTimeout(() => {
            this.imgCanvasCTX = this.$element('imgCanvas').getContext('2d');// 获取画笔
            this.dragVerification(this.imgCanvasCTX);// 绘制验证码
        }, 100)
    },
//    更新验证码内容
    updataValue() {
        let verificationValue = '';
        for (var index = 0; index < this.verificationLength; index++) {// 循环验证码个数
            const value = this.randomData[this._randomNum(0, this.randomData.length - 1)];// 生成数字或者字母验证码
            if (Math.random() > 0.5 && typeof value === 'string') {// 随机将大写字母转换为小写
                value = value.toLowerCase()
            }
            verificationValue += value;// 将验证码拼起来
        }
        this.verificationValue = verificationValue;// 最终生成的验证码
    },
//    点击更新验证码
    updataValueClick() {
        this.inputValue = '';
        this.updataValue();
        this.dragVerification(this.imgCanvasCTX);
    },
//    修改输入框数据
    changeInputValue(value) {
        this.inputValue = value.value;
        console.log("修改数据" + this.inputValue)
    },
//    验证数据
    verification() {
        console.log("验证数据");
        let newValue = '';
        const verificationValueList = this.verificationValue.split('');
        for (let index = 0; index < this.verificationLength; index++) {
            if (typeof verificationValueList[index] === 'string' && !this.isCaseSensitive) {
                newValue += verificationValueList[index].toLowerCase();
            } else {
                newValue += verificationValueList[index]
            }
        }
        if (newValue === this.inputValue) {
            this.verificationState = 'success';
            this.$emit('verificationSuccess');
        } else {
            this.verificationState = 'error';
            this.$emit('verificationError');
            setTimeout(() => {
                this.inputValue = '';
                this.verificationState = '';
            }, 2000);
        }
    },
//    绘制验证码
    dragVerification(ctx) {
        ctx.clearRect(0, 0, this.imgCanvasWidth, this.imgCanvasHeigth); // 清除画布
        ctx.textBaseline = 'bottom';// 文本基线在底端
        // 绘制背景
        ctx.fillStyle = this._randomColor(180, 230);// 随机背景颜色
        ctx.fillRect(0, 0, this.imgCanvasWidth, this.imgCanvasHeigth);// 背景颜色填充
        // 绘制文字
        const verificationValueList = this.verificationValue.split('');// 字符串分割成数组
        verificationValueList.forEach((item, index) => {
            this._drawText(ctx, item, index); // 绘制文字
        })
        if (this.isShowLine) this._drawLine(ctx);// 绘制干扰线
        if (this.isShowDot) this._drawDot(ctx);// 绘制干扰点
    },
//    绘制文字
    _drawText(ctx, txt, i) {
        ctx.fillStyle = this._randomColor(20, 80); // 随机画笔颜色
        ctx.font = `${this._randomNum(20, 30)}px SimHei`; // 随机字体大小
        let x = (i + 0.5) * (this.imgCanvasWidth / (this.verificationValue.length + 1)); // x轴原点
        let y = this._randomNum(30, 45);// y轴原点
        var deg = this._randomNum(-30, 30);// 偏移角度
        ctx.translate(x, y); // 修改坐标原点
        ctx.rotate(deg * Math.PI / 180);// 旋转坐标轴
        ctx.fillText(txt, 0, 0);// 绘制文字
        ctx.rotate(-deg * Math.PI / 180);// 恢复旋转角度
        ctx.translate(-x, -y);// 恢复坐标原点
        ctx.closePath();// 关闭路径
    },
//    绘制线条
    _drawLine(ctx) {
        // 绘制干扰线
        for (let i = 0; i < 3; i++) {
            ctx.strokeStyle = this._randomColor(100, 180);// 随机线条颜色
            ctx.beginPath();
            ctx.moveTo(this._randomNum(0, this.imgCanvasWidth), this._randomNum(0, this.imgCanvasHeigth));// 随机画笔开始点
            ctx.lineTo(this._randomNum(0, this.imgCanvasWidth), this._randomNum(0, this.imgCanvasHeigth));// 随机画笔结束点
            ctx.closePath();
            ctx.stroke();
        }
    },
//    绘制点
    _drawDot(ctx) {
        // 绘制干扰点
        for (let i = 0; i < 100; i++) {
            ctx.fillStyle = this._randomColor(0, 255);// 随机点颜色
            ctx.beginPath()
            ctx.arc(this._randomNum(0, this.imgCanvasWidth), this._randomNum(0, this.imgCanvasHeigth), 1, 0, 2 * Math.PI);// 绘制小圆点
            ctx.closePath();
            ctx.fill();
        }
    },
//    生成一个随机颜色
    _randomColor(max, min) {
        let r = this._randomNum(max, min)
        let g = this._randomNum(max, min)
        let b = this._randomNum(max, min)
        return `rgb(${r},${g},${b})`
    },
//    生成一个随机数
    _randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min)
    }
}
